import { Button } from "antd-mobile";
import React, { useEffect, useState } from "react";
import "./home.less";
import bg from "@/assets/images/home/xiaolang.png";
import { DownFill } from "antd-mobile-icons";
import { homeDataApi } from "@/api";
import ExamItem from "./components/ExamItem";

export default function Home() {
  // 定义响应式数据
  const [homeData, setHomeData] = useState<HomeData>();
  // 进入页面，获取首页数据
  useEffect(() => {
    homeDataApi().then((res) => {
      if (res?.errCode === 0) {
        setHomeData(res.data);
      }
    });
  }, []);

  return (
    <div className="home">
      <div className="subjects flex flex-between">
        <h2>{homeData?.exam.title}</h2>
        <Button color="primary" fill="none">
          切换考试科目
          <DownFill />
        </Button>
      </div>
      <div className="wel">
        <div className="msg">欢迎Tomato来到XX学习库！</div>
        <div className="flex">
          <div className="left">
            <img src={bg} alt="" />
          </div>
          <div className="right">
            <ul className="flex">
              <li>已学{homeData?.study}题</li>
              <li>共{homeData?.exam.itemCount}题</li>
            </ul>
            <ul className="flex">
              <li className="flex">
                <span className="num">{homeData?.wrong}</span>
                <span className="text">错题</span>
              </li>
              <li className="flex">
                <span className="num">{homeData?.collect}</span>
                <span className="text">收藏</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div className="list">
        <h2>学科题库</h2>
        <div className="list-c">
          {homeData?.exemItems.map((item) => (
            <ExamItem key={item.id} item={item} />
          ))}
        </div>
      </div>
    </div>
  );
}
